<template>
  <div>
    <slot name="controller" />

    <div
      id="trendChart"
      :style="{ height: '360px', width: '96%' }"
    />
  </div>
</template>

<script>
  import { ChartResizeMixin } from '@/mixins/ChartResizeMixin'
  import * as echarts from 'echarts';
  import moment from "moment"

  export default {
    name: 'TrendLine',
    mixins: [ChartResizeMixin],
    props: {
      trendInfo: {
        type: Object,
        default: () => ({})
      }
    },
    watch: {
      trendInfo(val) {
        if (Object.keys(val).length > 0) {
          this.drawChart()
        }
      }
    },
    methods: {
      drawChart() {
        this.chart = echarts.init(document.getElementById('trendChart'), 'light')
        const option = {
          tooltip: {
            trigger: 'axis',
          },
          title: {
            text: '数据变化趋势图',
            left: "center",
            top: "top",
            textStyle: {
              color: '#6B6B6B',
              fontWeight: 500,
              fontSize: 14
            }
          },
          legend: {
            bottom: 'bottom',
            data: ['一般业务数据', '重要业务数据'],
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.trendInfo.generals.map(item => item.label),
          },
          yAxis: {
            type: 'value',
          },
          series: [{
            name: '一般业务数据',
            type: 'line',
            data: this.trendInfo.generals.map(item => item.count)
          }, {
            name: '重要业务数据',
            type: 'line',
            data: this.trendInfo.vitals.map(item => item.count)
          }],
        }

        this.chart.setOption(option)
      },
    },
  }
</script>